<template>
    <div>
        <div class="box">热销推荐</div>
        <div class="recom">
            <div class="recom-text" v-for="item in list.recommendList" :key="item.id">
                <img :src="item.imgUrl" alt="">
                <div class="recom-item">
                    <h3>{{item.title}}</h3>
                    <p>{{item.desc}}</p>
                    <div class="btn">查看详情</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props:{
            list:{
                type:Object,
                required:true
            }
        }
    }
</script>

<style lang="stylus" scoped>
.box
    padding: 2%
.recom
    .recom-text
        height: 120px
        display: flex
        background: #fff
        line-height: 40px
        padding-bottom: 10px
        p
         font-size: 20px
         color: #aaa
    .recom-item
        padding-left: 10px
        .btn
           width: 100px
           background: orange
           text-align: center
           color: #fff 
           font-size: 20px
</style>